<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航条</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<!--
        	作者：zxy
        	时间：2019-07-27
        	描述：花式导航条
 		 --> 
 		
 		<!-- 固定在底部 navbar-fixed-bottom-->
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        	<!--流动的容器container-fluid-->
        	<div class="container">
        		<!--具体内容--> <!--导航条的开头-->
        		<div class="navbar-header navbar-left ">
        			<a href="#" class="navbar-brand">德玛西亚</a>
        			<!--这里我要弄个折叠的按钮-->                         <!--折叠的按钮 ，后面两个属性必须有-->
        			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#zhedie">
	        				<!--切换导航 ，一个面包按钮-->
	        				<span class="sr-only">切换导航</span>
	        				<span class="icon-bar"></span>
	        				<span class="icon-bar"></span>
	        				<span class="icon-bar"></span>
	        		</button>
        		</div>
        		
	        	<!--折叠的框-->       <!--导航条的折叠部分-->   <!--id-->
	        	<div class="collapse navbar-collapse navbar-left" id="zhedie">
	        		<!--里面的内容--> <!--导航条的导航部分-->
	        		<ul class="nav navbar-nav" id="mytab">
	        			<li class="active"><a href="#" >Link</a></li>
	        			<li ><a href="#">Link</a></li>
	        			<li ><a href="#">Link</a></li>
	        		</ul>
	        		
	        	</div>
	        	
	        	<!--第二个折叠的框-->
	        	<div class="collapse navbar-collapse navbar-right" >
		        			<!--导航条的表格部分--> <!--居右-->
	        		<form class="navbar-form navbar-left" role="search">
	        			<div class="form-group">
	        				<input type="text" class="form-control" placeholder="搜索" />
	        			</div>
	        			<button type="submit" class="btn btn-default">搜索</button>
	        		</form>
	        		
	        		<!--居右的导航条-->
	        		<ul class="nav navbar-nav navbar-right">
	        			<li><a href="#">link</a></li>
	        			<li class="dropdown">
	        				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
	        					下拉菜单
	        					<span class="caret"></span>
	        				</a>
	        				<ul class="dropdown-menu" role="menu">
	        					<li><a href="#">hello</a></li>
	        					<li><a href="#">hello</a></li>
	        					<li><a href="#">hello</a></li>
	        				</ul>
	        			</li>
	        		</ul>
	        	</div>
        	      
	        	
	        	
        	</div>
        	
        </div>	
        
        hello<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        hello
        
        <!--路径导航-->
        <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        	<!--面包屑 以导航回该级别。-->
        	<ol class="breadcrumb">
        		<li><a href="#">Home</a></li>
        		<li><a href="#">data</a></li>
        		<li><a href="#">1</a></li>
        	</ol>
        </nav>
        
        <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$("#mytab a").click(function(e){
				e.preventDefault();//阻止原来的事件发生
				$(this).tab("show");//这个点击的tab显示
			})
		</script>
	</body>
</html>
